<meta charset="UTF-8">
<style>
    div {
    width: 800px;
    height: 40px;
    border: solid 1px black;
    margin: 30px auto;
}
</style>
<table border="1" cellspacing="0" style="margin: auto;">
    <thead>
        <tr>
        <th>序号</th>
        <th>学生ID</th>
        <th>学生姓名</th>
        <th>学生年龄</th>
        <th>学生性别</th>
        <th>学生班级</th>
        <th>学生成绩</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<div class="page1"></div>
<script>
    const firstName = '赵钱孙李周吴郑王冯陈楚魏将沈韩杨朱琴尤许何吕施章'
    const laseName = '氢氦锂铍硼碳氮氧氟氖钠镁铝硅磷硫氯氩钾钙'
    const thirdName = '一二三四五六七八九十'
    const gender = '男女'
    const fn = (a, b) => Math.floor(Math.random() * (b - a + 1)) + a
    const tableData = []
    for (let i = 0; i <= 1000; i++) {
        tableData.push({
        id: i + 1,
        name: firstName[fn(0, 23)] + laseName[fn(0, 19)] + thirdName[fn(0, 9)],
        age: fn(16, 30),
        gender: gender[fn(0, 1)],
        class: fn(1910, 1920),
        score: fn(40, 100)
        })
    }
    let pageNum = 1
    let pageSize = 10
    let start = (pageNum - 1) * pageSize
    let tbodyObj = document.querySelector('tbody')
    let html = ``
    for (let i = start; i<start+pageSize; i++) {
        html += `
        <tr>
            <td>${i}</td>
            <td>${tableData[i].id}</td>
            <td>${tableData[i].name}</td>
            <td>${tableData[i].age}</td>
            <td>${tableData[i].gender}</td>
            <td>${tableData[i].class}</td>
            <td>${tableData[i].score}</td>
        </tr>
        `
    }
    tbodyObj.innerHTML = html
</script>

<script type="module">
import Page from './demo.js'
let page1 = new Page('.page1',{
        pageTag: {
            first: '首页',
            prev: '上一页',
            list: null,
            next: '下一页',
            last: '末页',
        },
        pageInfo: {
            pageNum:  1,
            pageSize: 10,
            totalData: 1000,
        },
        callback(pageNum) {
            let pageSize = 10
            let start = (pageNum - 1) * pageSize
            let tbodyObj = document.querySelector('tbody')
            let html = ``
            for (let i = start; i<start+pageSize; i++) {
            html += `
            <tr>
                <td>${i}</td>
                <td>${tableData[i].id}</td>
                <td>${tableData[i].name}</td>
                <td>${tableData[i].age}</td>
                <td>${tableData[i].gender}</td>
                <td>${tableData[i].class}</td>
                <td>${tableData[i].score}</td>
            </tr>
            `
        }
        tbodyObj.innerHTML = html
    }
})
</script>